<template>
    <div>
        <van-nav-bar
        v-show="showTitle"
        title="电影"
        :left-text="this.$store.state.currentCity"
        @click-left="select"
        />
        <div class="city-fixed" @click="select">
            <span>{{this.$store.state.currentCity}}</span>
            <van-icon name="arrow-down" />
        </div>
        <div class="banner">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(item,index) of banner" :key="index">
                    <img :src="item">
                </van-swipe-item>
            </van-swipe>
        </div>
        <van-tabs v-model="active" route>
            <van-tab title="正在热映" to="/films/nowPlaying"></van-tab>
            <van-tab title="即将上映" to="/films/comingSoon"></van-tab>
        </van-tabs>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'films',
        data(){
            return {
                banner:[
                    'https://static.maizuo.com/v5/upload/748cfac335e01362a09e916342178a86.jpg?x-oss-process=image/quality,Q_70',
                    'https://static.maizuo.com/v5/upload/a065abe367c5e0920875f730d3adfc54.jpg?x-oss-process=image/quality,Q_70',
                    'https://static.maizuo.com/v5/upload/15ec8fffe58a7275380ff7c2937deca2.jpg?x-oss-process=image/quality,Q_70'
                ],
                active:0,
                showTitle:false
            }
        },
        methods:{
            select(){
                this.$router.push('/city');
            },
            handle(){
                let height = document.documentElement.scrollTop;
                if(height>210){
                    this.showTitle = true;
                }else{
                    this.showTitle = false;
                }
            }
        },
        mounted(){
            window.addEventListener('scroll',this.handle);
                //添加事件监听
        },
        destroyed(){
            window.removeEventListener("scroll",this.handle);
        }
    }
</script>

<style scoped>
    .van-swipe-item img{
        width: 100%;
    }
    .city-fixed{
    position: absolute;
    top: 18px;
    left: 7px;
    color: #fff;
    z-index: 10;
    font-size: 13px;
    background: rgba(0,0,0,.2);
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    padding: 0 5px;
    }
    .van-nav-bar{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
    }
</style>